<template>
  <div id="article-comments">
    <h2 class="text-align-center p-t-10 p-b-10"><i class="el-icon-back"></i> 评论列表 <i class="el-icon-right"></i></h2>
    <div v-if="commentList.length == 0" class="text-align-center">
      <el-divider></el-divider>
      <i class="el-icon-chat-square fz-50"></i>
      <h3>暂无评论</h3>
      <el-divider></el-divider>
    </div>
    <div v-else>
      <div class="comment" v-for="(item, index) in commentList" :key="index">
        <header class="h-40 l-h-40 flex">
          <div class="w-30 m-r-10"><el-avatar size="medium" :src="item.commentIcon"></el-avatar></div>
          <h3 class="color2">{{item.commentName}}</h3>
          <el-button v-if="replyIndex !== index" class="m-l-20" type="text" @click="replyComment(item,index)">回复</el-button>
          <el-button v-if="replyIndex !== index" class="m-l-20" type="text" @click="deleteComment(item,index)">删除</el-button>
          <div v-if="replyIndex === index" class="reply flex m-l-15">
            <el-input size="mini" v-model="item.reply" placeholder="请输入回复"></el-input>
            <el-button class="m-l-15" type="text" @click="saveReply(item,index)">保存</el-button>
            <el-button type="text" @click="cancelReply(item,index)">取消</el-button> 
          </div>
        </header>
        <div class="content">
          <div>{{item.commentContent}}</div>
          <div v-if="item.isReply" class="reply m-t-10 ">管理员回复: {{item.reply}}</div>
        </div>
        <footer>
          <div class="fz-14"><i class="el-icon-time"></i> {{item.createTime | dateTime}}</div>
        </footer>
      </div>
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="page.currentPage"
        :page-sizes="pageSizes"
        background
        :page-size="page.pageSize"
        layout="total, prev, pager, next"
        :total="totalNum" 
        class="flex flex-space-between">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commentList: [],
      replyIndex: null,
      page: {
        pageSize: 10,
        currentPage: 1,
      },
      pageSizes: [10, 20, 30, 40, 50],
      totalNum: 1000,
    }
  },
  props: {
    CommentArticleId: {
      require: true
    }
  },
  watch: {
    CommentArticleId() {
      this.getCommentList()
    }
  },
  created() {
    this.getCommentList()
  },
  methods: {
    async getCommentList() {
      let res = await this.api.post('/admin/article/getCommentList', {
        ...this.page,
        commentArticleId: this.CommentArticleId
      })
      if(res.code == 0) {
        this.commentList = res.data.commentList
        this.totalNum = res.data.counts
      }
    },
    replyComment(item,index) {
      this.replyIndex = index
    },
    async deleteComment(item, index) {
      let res = await this.api.post('/admin/article/deleteComment', item)
      if(res.code == 0) {
        this.getCommentList()
        this.$message({ message: res.message, type: 'success', showClose: true, })
      }
    },
    async saveReply(item,index) {
      let res = await this.api.post('/admin/article/updateCommentReply', item)
      if(res.code == 0) {
        this.replyIndex = null
        this.getCommentList()
        this.$message({ message: res.message, type: 'success', showClose: true, })
      }
    },
    cancelReply(item,index) {
      this.replyIndex = null
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.getCommentList()
    },
    currentChange(thisPage) {
      this.page.currentPage = thisPage
      this.getCommentList()
    },
  },
}
</script>

<style lang="scss">
  #article-comments {
    color: #606266;
    margin-top: 30px;
    padding: 0 30px;
    border-top: 1px solid #DCDFE6;
    .comment {
      border-bottom: 1px dashed #DCDFE6;
      padding: 18px 0;
      img {
        vertical-align: middle;
      }
      .content {
        padding: 15px 15px;
        border-left: 3px solid #ddd;
        background: #f6f6f6;
        margin: 14px auto;
        .reply {
          color: #fa6706;
        }
      }
    }
  }
</style>